<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="sider.css">
</head>

<body>
    <div class="page">
        <div class="sidebar">
            <h2>橙子之家</h2>
            <a href="home.html">首页</a>
            <a href="pageOne.html">栽培技术</a>
            <a href="pageTwo.html">药用价值</a>
            <a href="PageThree.html">相关知识</a>
            <a href="PageFour.html">新鲜橙子</a>
            <a href="pageFive.html">留言板</a>
        </div>

        <div class="content">
            <div class="content-container">
                <!-- <h1>新鲜橙子</h1> -->
                <div class="container">
                    <div class="card">
                        <img src="./assert/img/origin2.jpg" alt="新鲜橙子">
                        <h3>
                            <p>脐橙</p>
                        </h3>
                    </div>
                    <div class="card">
                        <img src="./assert/img/origin7.jpg" alt="新鲜橙子">
                        <h3>
                            <p>瓦伦西亚橙</p>
                        </h3>
                    </div>
                    <div class="card">
                        <img src="./assert/img/origin1.jpg" alt="新鲜橙子">
                        <h3>
                            <p>血橙</p>
                        </h3>
                    </div>
                    <div class="card">
                        <img src="./assert/img/origin1.jpg" alt="新鲜橙子">
                        <h3>
                            <p>卡拉卡橙</p>
                        </h3>
                    </div>
                    <div class="card">
                        <img src="./assert/img/origin2.jpg" alt="新鲜橙子">
                        <h3>
                            <p>酸橙</p>
                        </h3>
                    </div>
                    <div class="card">
                        <img src="./assert/img/origin7.jpg" alt="新鲜橙子">
                        <h3>
                            <p>克莱门氏小柑橙</p>
                        </h3>
                    </div>
                    <div class="card">
                        <img src="./assert/img/origin1.jpg" alt="新鲜橙子">
                        <h3>
                            <p>塔罗科血橙</p>
                        </h3>
                    </div>
                    <div class="card">
                        <img src="./assert/img/origin7.jpg" alt="新鲜橙子">
                        <h3>
                            <p>摩洛哥血橙</p>
                        </h3>
                    </div>
                    <div class="card">
                        <img src="./assert/img/origin2.jpg" alt="新鲜橙子">
                        <h3>
                            <p>冰糖橙</p>
                        </h3>
                    </div>
                </div>
                <div class="pagination">
                    <a href="#">Previous</a>
                    <a href="#" class="active">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                    <a href="#">4</a>
                    <a href="#">5</a>
                    <a href="#">6</a>
                    <a href="#">Next</a>
                </div>
            </div>
        </div>
    </div>
</body>
<style>
    .page {
        display: flex;
        background-color: #faf7ef;
    }

    body {
        background-color: #FCE9D4;
        font-family: Arial, sans-serif;
    }

    h1 {
        text-align: center;
        margin-top: 50px;
    }

    .content {
        background: url(./assert/img/bg3.png) no-repeat center;
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }

    .content .content-container {
        height: 100%;
        width: 70%;
        /* background-color: pink !important; */

    }

    .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        margin-top: 50px;
    }

    .card {
        width: 30%;
        padding: 10px;
        box-sizing: border-box;
        /* border: 1px solid #E6AEDB; */
        margin: 10px;
        text-align: center;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    .pagination {
        display: flex;
        justify-content: center;
        margin-top: 50px;
    }

    .pagination a {
        color: black;
        padding: 10px;
        margin: 0 5px;
        text-decoration: none;
        font-size: 18px;
    }

    .pagination a:hover {
        background-color: #E6AEDB;
        color: white;
    }

    .active {
        background-color: #E6AEDB;
        color: white;
    }
</style>
</style>

</html>